/*
Delivery information
=========================================
Defines the delivery status for products (e.g. detail page, note).

The styling includes the base styling and the delivery states.


```
<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-available">
            <i class="delivery--status-icon delivery--status-available"></i>
            delivery--text-available
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-more-is-coming">
            <i class="delivery--status-icon delivery--status-more-is-coming"></i>
            delivery--text-more-is-coming
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-shipping-free">
            <i class="delivery--status-icon delivery--status-shipping-free"></i>
            delivery--text-shipping-free
        </span>
    </p>
</div>

<div class="product--delivery">
    <p class="delivery--information">
        <span class="delivery--text delivery--text-not-available">
            <i class="delivery--status-icon delivery--status-not-available"></i>
            delivery--text-not-available
        </span>
    </p>
</div>
```
*/

.product--delivery {
	.unitize(font-size, 14);

    p { margin: 0; }

	// Base class for the icon
	.delivery--status-icon {
		.unitize-variable(9); // returns the variable "emValue"
		.border-radius(~"@{emValue}rem");
		.unitize-margin(0, 5, 0, 0);
		.unitize-width(9);
		.unitize-height(9);
        .unitize(line-height, 10);
		display: inline-block;
        position: relative;
	}

    .delivery--status-shipping-free {
        background: @highlight-info;
    }
    .delivery--text-shipping-free {
        color: @highlight-info;
    }

	.delivery--status-available {
        background: @highlight-success
	}
	.delivery--text-available {
        color: @highlight-success;
	}

    .delivery--status-more-is-coming {
        background: @highlight-notice;
    }
    .delivery--text-more-is-coming {
        color: @highlight-notice;
    }

    .delivery--status-not-available {
        background: @highlight-error;
    }

    .delivery--text-not-available {
        color: @highlight-error;
    }

	.delivery--text {
		margin: 0;
		display: inline-block;
	}
}